import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/ui/login/password_viewmodel.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';

/// @description:
/// @author tangzhentao
/// @created at 21:37 2024/11/24

class PasswordPage extends StatelessWidget {
  /// 是否登录页面进来
  final bool isLogin;

  const PasswordPage({super.key, required this.isLogin});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<PasswordViewmodel>(
        resizeToAvoidBottomInset: false,
        backgroundColor: XfgColor.white,
        appBar: (_) => xfgAppbar(backgroundColor: XfgColor.transparent),
        model: PasswordViewmodel(isLogin),
        builder: (_, password) => SingleChildScrollView(
          child: Column(
            children: [
              Container(
                width: XfgSize().screenWidth,
                margin: EdgeInsets.only(left: XfgSize().size26, top: XfgSize().size16),
                child: XfgText('忘记密码', fontSize: XfgSize().text28, color: XfgColor.text1, bold: FontWeight.bold),
              ),
              /// 手机号
              Container(
                margin: EdgeInsets.only(top: XfgSize().size26),
                width: XfgSize().size342,
                height: XfgSize().size50,
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                alignment: Alignment.center,
                decoration: loginTextFieldDecoration,
                child: TextField(
                  keyboardType: TextInputType.phone,
                  style: TextStyle(fontSize:XfgSize().text16, color: XfgColor.text1),
                  maxLines: 1,
                  controller: password.phoneController,
                  focusNode: password.phoneNode,
                  onChanged: password.phoneChanged,
                  onEditingComplete: () {},
                  decoration: InputDecoration(
                      isCollapsed: true,
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                      hintText: '请输入手机号'
                  ),
                ),
              ),
              /// 验证码
              Container(
                margin: EdgeInsets.only(top: XfgSize().size16),
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                width: XfgSize().size342,
                height: XfgSize().size50,
                decoration: loginTextFieldDecoration,
                alignment: Alignment.center,
                child: Row(
                  children: [
                    Expanded(
                      child: TextField(
                        style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text1),
                        maxLines: 1,
                        controller: password.codeController,
                        focusNode: password.codeNode,
                        onChanged: password.codeChanged,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                            isCollapsed: true,
                            border: InputBorder.none,
                            contentPadding: EdgeInsets.zero,
                            hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                            hintText: '请输入验证码'
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(right: XfgSize().size12),
                      color: XfgColor.colorE,
                      width: XfgSize().size0_5,
                      height: XfgSize().size16,
                    ),
                    Builder(builder: (ctx) {
                      final click = ctx.select<PasswordViewmodel, bool>((value) => value.canCodeClick);
                      final second = ctx.select<PasswordViewmodel, int>((value) => value.codeSecond);
                      return InkWell(
                        onTap: click ? password.sendCode:null,
                        child: XfgText(
                            second == 60 ? '获取验证码':'${second}S',
                            fontSize: XfgSize().text16,
                            color: click ? (second == 60 ? XfgColor.theme:XfgColor.text3):XfgColor.theme.withValues(alpha: 0.5)
                        ),
                      );
                    }),
                  ],
                ),
              ),
              /// 设置密码
              Container(
                margin: EdgeInsets.only(top: XfgSize().size16),
                width: XfgSize().size342,
                height: XfgSize().size50,
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                alignment: Alignment.center,
                decoration: loginTextFieldDecoration,
                child: TextField(
                  keyboardType: TextInputType.phone,
                  style: TextStyle(fontSize:XfgSize().text16, color: XfgColor.text1),
                  maxLines: 1,
                  controller: password.psdController,
                  obscureText: true,
                  focusNode: password.psdNode,
                  onChanged: password.psdChanged,
                  onEditingComplete: () {},
                  decoration: InputDecoration(
                      isCollapsed: true,
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                      hintText: '设置密码'
                  ),
                ),
              ),
              /// 再次输入
              Container(
                margin: EdgeInsets.only(top: XfgSize().size16),
                width: XfgSize().size342,
                height: XfgSize().size50,
                padding: EdgeInsets.symmetric(horizontal: XfgSize().size20),
                alignment: Alignment.center,
                decoration: loginTextFieldDecoration,
                child: TextField(
                  keyboardType: TextInputType.phone,
                  style: TextStyle(fontSize:XfgSize().text16, color: XfgColor.text1),
                  maxLines: 1,
                  controller: password.againController,
                  obscureText: true,
                  focusNode: password.againNode,
                  onChanged: password.againChanged,
                  onEditingComplete: () {},
                  decoration: InputDecoration(
                      isCollapsed: true,
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.zero,
                      hintStyle: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3),
                      hintText: '再次输入'
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(left: XfgSize().size26, top: XfgSize().size16, bottom: XfgSize().size58),
                alignment: Alignment.centerLeft,
                child: XfgText('*密码由6-20位数字字母组合', fontSize: XfgSize().text16, color: XfgColor.theme),
              ),
              /// 完成
              Selector<PasswordViewmodel, bool>(
                  selector: (_, k) => k.canClick,
                  builder: (_, canClick,__) => TextButton(
                    onPressed: canClick? password.done:null,
                    style: ButtonStyle(
                        fixedSize: WidgetStatePropertyAll(Size(XfgSize().size342, XfgSize().size52)),
                        shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(XfgSize().size6))),
                        visualDensity: VisualDensity.compact,
                        backgroundColor: WidgetStateProperty.resolveWith((states) {
                          if (states.contains(WidgetState.disabled)) {
                            return XfgColor.theme.withValues(alpha: 0.5);
                          }
                          return XfgColor.theme;
                        })
                    ),
                    child: XfgText('完成', color: XfgColor.white, fontSize: XfgSize().text18),
                  )
              ),
            ],
          ),
        )
    );
  }

}
